<template>
  <div class="Government">
    <div class="main">
      <p class="p1">官方榜</p>
      <div class="imglist" v-for="item in homedirlist1" :key="item.id">
        <img :src="item.coverImgUrl" alt="#">
        <div>
          <div :class="index1%2==0?'a':''" class="b" style="width:900px;margin-left:20px;border-radius:5px;padding:7px 7px" v-for="(item1,index1) in playlisttracks1" :key="index1">
            <span style="font-size:13px;" :class="index1<3?'c':''">{{index1+1}}</span>
            <span style="font-size:12px;margin-left: 45px;">{{item1.name}}</span>
            <span style="float: right;font-size:13px;opacity: 0.5;" v-for="(item2,index2) in item1.ar" :key="index2">{{item2.name}}</span>
          </div>
          <span class="d">查看全部<i class="el-icon-arrow-right" @click="getJumpsonglist()"></i></span>
        </div>
      </div>
      <div class="imglist" v-for="item in homedirlist2" :key="item.id">
        <img :src="item.coverImgUrl" alt="#">
        <div>
          <div :class="index1%2==0?'a':''" class="b" style="width:900px;margin-left:20px;border-radius:5px;padding:7px 7px" v-for="(item1,index1) in playlisttracks2" :key="index1">
            <span style="font-size:13px;" :class="index1<3?'c':''">{{index1+1}}</span>
            <span style="font-size:12px;margin-left: 45px;">{{item1.name}}</span>
            <span style="float: right;font-size:13px;opacity: 0.5;" v-for="(item2,index2) in item1.ar" :key="index2">{{item2.name}}</span>
          </div>
          <span class="d">查看全部<i class="el-icon-arrow-right"></i></span>
        </div>
      </div>
      <div class="imglist" v-for="item in homedirlist3" :key="item.id">
        <img :src="item.coverImgUrl" alt="#">
        <div>
          <div :class="index1%2==0?'a':''" class="b" style="width:900px;margin-left:20px;border-radius:5px;padding:7px 7px" v-for="(item1,index1) in playlisttracks3" :key="index1">
            <span style="font-size:13px;" :class="index1<3?'c':''">{{index1+1}}</span>
            <span style="font-size:12px;margin-left: 45px;">{{item1.name}}</span>
            <span style="float: right;font-size:13px;opacity: 0.5;" v-for="(item2,index2) in item1.ar" :key="index2">{{item2.name}}</span>
          </div>
          <span class="d">查看全部<i class="el-icon-arrow-right"></i></span>
        </div>
      </div>
      <div class="imglist" v-for="item in homedirlist4" :key="item.id">
        <img :src="item.coverImgUrl" alt="#">
        <div>
          <div :class="index1%2==0?'a':''" class="b" style="width:900px;margin-left:20px;border-radius:5px;padding:7px 7px" v-for="(item1,index1) in playlisttracks4" :key="index1">
            <span style="font-size:13px;" :class="index1<3?'c':''">{{index1+1}}</span>
            <span style="font-size:12px;margin-left: 45px;">{{item1.name}}</span>
            <span style="float: right;font-size:13px;opacity: 0.5;" v-for="(item2,index2) in item1.ar" :key="index2">{{item2.name}}</span>
          </div>
          <span class="d">查看全部<i class="el-icon-arrow-right"></i></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Government',
  data() {
    return {
      //存储排行榜歌单的前四个id
      homedirlist: [],
      homedirlist1: [],
      homedirlist2: [],
      homedirlist3: [],
      homedirlist4: [],
      //榜单的前五个歌曲
      playlisttracks1: [],
      playlisttracks2: [],
      playlisttracks3: [],
      playlisttracks4: []
    }
  },
  computed: {
    ...mapState({
      list: state => state.RankingList.list,
      playlisttracks: state => state.RankingList.playlisttracks
    })
  },
  mounted() {
    this.$store.dispatch('getAllcontentsList')
    setTimeout(() => {
      for (let i = 0; i < 4; i++) {
        this.homedirlist.push(this.list[i].id)
      }
      this.homedirlist1.push(this.list[0])
      this.homedirlist2.push(this.list[1])
      this.homedirlist3.push(this.list[2])
      this.homedirlist4.push(this.list[3])
      // console.log(this.homedirlist)
      for (let i = 0; i < 4; i++) {
        this.$store.dispatch('getSonglistDetails', { id: this.homedirlist[i] })
      }
      setTimeout(() => {
        for (let i = 0; i < 5; i++) {
          this.playlisttracks1.push(this.playlisttracks[0][i])
          this.playlisttracks2.push(this.playlisttracks[3][i])
          this.playlisttracks3.push(this.playlisttracks[1][i])
          this.playlisttracks4.push(this.playlisttracks[1][i])
        }
      }, 100)
    }, 200)
  },
  watch: {
    list: {
      handler(v, o) {}
    }
  }
}
</script>

<style lang="less" scoped>
.Government {
  margin-top: 80px;
  .main {
    .p1 {
      font-size: 20px;
      font-weight: bold;
    }
    .imglist {
      display: flex;
      margin-bottom: 30px;
      .a {
        background-color: rgb(243, 238, 238);
      }
      .b {
        .c {
          color: red;
        }
      }
      .d {
        margin-left: 25px;
        font-size: 12px;
        opacity: 0.5;
      }
      .d:hover {
        cursor: pointer;
        opacity: 0.8;
      }
      .b:hover {
        cursor: pointer;
        background-color: rgb(236, 233, 233);
      }
      img {
        width: 180px;
        height: 180px;
        border-radius: 5px;
      }
      img:hover {
        cursor: pointer;
      }
    }
  }
}
</style>